<!--  -->
<template>
<div class='page'>
    <!-- 递归组件会被再次引用，因此如果递归组件放在一个 ul 列表中，则递归组件外面包一层 li  -->
    <li>
        <span @click="toggle">
            {{model.menuName}}
        </span>
        <ul v-show="open" v-if="hasChild">
            <tree-menu v-for="(item, index) in model.children" v-bind:model="item" v-bind:key="index"></tree-menu>
        </ul>
    </li>
</div>
</template>

<script>
export default {
name: "treeMenu",
props: ['model'],
data() {
return {
    open:false
};
},
mounted() {

},
methods: {
    toggle(){
        if(this.hasChild){
            this.open = !this.open
        }
    }
},
computed:{
    hasChild(){
        return this.model.children && this.model.children.length
    }
}
}
</script>
<style scoped>

</style>